<!-- 威胁评估驾驶舱 -->
<template>
  <div class="threat-assessment-cockpit">
    <!-- 顶部工具栏 -->
    <div class="cockpit-header">
      <div class="header-left">
        <h1 class="cockpit-title">
          <el-icon class="title-icon"><Warning /></el-icon>
          威胁评估驾驶舱
        </h1>
        <div class="status-indicators">
          <el-tag type="danger" size="small" v-if="highThreats > 0">
            <el-icon><Notification /></el-icon>
            高威胁: {{ highThreats }}
          </el-tag>
          <el-tag type="warning" size="small" v-if="mediumThreats > 0">
            中威胁: {{ mediumThreats }}
          </el-tag>
          <el-tag type="success" size="small">
            <el-icon><CircleCheck /></el-icon>
            系统正常
          </el-tag>
        </div>
      </div>

      <div class="header-actions">
        <el-button-group class="action-group">
          <el-button size="small" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button size="small" @click="exportReport">
            <el-icon><Download /></el-icon>
            导出报告
          </el-button>
          <el-button size="small" type="primary" @click="startInterception" :disabled="!hasActiveThreats">
            <el-icon><Lightning /></el-icon>
            查看拦截
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 主工作区域 -->
    <div class="cockpit-content">
      <!-- 左侧威胁等级仪表盘 -->
      <div class="left-panel">
        <ThreatLevelDashboard
          :threatData="threatData"
          :aircraftThreats="aircraftThreats"
          :shipThreats="shipThreats"
          @threatSelected="handleThreatSelected"
        />
      </div>

      <!-- 右侧拦截推演沙盘 -->
      <div class="right-panel">
        <InterceptionSimulation
          :selectedThreat="selectedThreat"
          :missileTrajectories="missileTrajectories"
          :interceptionZones="interceptionZones"
          @simulationStart="handleSimulationStart"
          @simulationStop="handleSimulationStop"
        />
      </div>
    </div>

    <!-- 底部状态栏 -->
    <div class="cockpit-footer">
      <div class="status-left">
        <div class="status-item">
          <el-icon><Position /></el-icon>
          <span>监控目标: {{ totalTargets }}</span>
        </div>
        <div class="status-item">
          <el-icon><Timer /></el-icon>
          <span>数据更新: {{ lastUpdateTime }}</span>
        </div>
        <div class="status-item" v-if="isSimulating">
          <el-icon class="blinking"><VideoPlay /></el-icon>
          <span>推演运行中...</span>
        </div>
      </div>

      <div class="status-right">
        <div class="threat-summary">
          <span class="threat-level high">严重威胁: {{ highThreats }}</span>
          <span class="threat-level medium">中等威胁: {{ mediumThreats }}</span>
          <span class="threat-level low">低威胁: {{ lowThreats }}</span>
        </div>
        <div class="performance-indicator">
          <el-icon class="perf-icon" :class="{ active: systemHealth > 0.8 }"><Connection /></el-icon>
          <span class="perf-text">系统健康度: {{ Math.round(systemHealth * 100) }}%</span>
        </div>
      </div>
    </div>

    <!-- 紧急警报弹窗 -->
    <el-dialog
      v-model="showEmergencyAlert"
      title="紧急威胁警报"
      width="50vw"
      :close-on-click-modal="false"
    >
      <div class="emergency-alert">
        <el-icon class="alert-icon"><WarningFilled /></el-icon>
        <h3>检测到高威胁目标</h3>
        <p>{{ emergencyAlertMessage }}</p>
        <div class="alert-actions">
          <el-button type="danger" @click="handleEmergencyResponse">立即响应</el-button>
          <el-button @click="dismissAlert">稍后处理</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Warning,
  Notification,
  CircleCheck,
  Refresh,
  Download,
  Lightning,
  Position,
  Timer,
  VideoPlay,
  Connection,
  WarningFilled
} from '@element-plus/icons-vue'

// 导入子组件
import ThreatLevelDashboard from './components/threat-assessment/ThreatLevelDashboard.vue'
import InterceptionSimulation from './components/threat-assessment/InterceptionSimulation.vue'

// 威胁数据
const threatData = ref({
  overall: 0.65, // 总体威胁等级
  trends: [0.3, 0.4, 0.5, 0.6, 0.65], // 威胁趋势
  regions: [
    { name: '东南海域', level: 0.8, count: 3 },
    { name: '西北空域', level: 0.6, count: 2 },
    { name: '南部边界', level: 0.4, count: 1 }
  ]
})

const aircraftThreats = ref([
  { id: 'F001', type: '战机-F-22', threat: 0.85, distance: 120, bearing: 45, speed: 850, altitude: 8000 },
  { id: 'F002', type: '战机-A-10', threat: 0.92, distance: 200, bearing: 135, speed: 650, altitude: 10000 },
  { id: 'F003', type: '侦察机', threat: 0.35, distance: 300, bearing: 270, speed: 450, altitude: 12000 }
])

const shipThreats = ref([
  { id: 'S001', type: '导弹驱逐舰', threat: 0.78, distance: 80, bearing: 90, speed: 28, displacement: 8500 },
  { id: 'S002', type: '护卫舰', threat: 0.45, distance: 150, bearing: 180, speed: 25, displacement: 4500 },
  { id: 'S003', type: '潜艇', threat: 0.88, distance: 60, bearing: 315, speed: 15, displacement: 3200 }
])

const missileTrajectories = ref([
  { id: 'M001', source: 'F002', target: { lat: 39.9, lng: 116.4 }, trajectory: [], estimated_impact: 120 },
  { id: 'M002', source: 'S001', target: { lat: 40.1, lng: 116.6 }, trajectory: [], estimated_impact: 180 }
])

const interceptionZones = ref([
  { id: 'IZ001', center: { lat: 39.95, lng: 116.5 }, radius: 50, coverage: 0.85, status: 'active' },
  { id: 'IZ002', center: { lat: 40.0, lng: 116.3 }, radius: 30, coverage: 0.92, status: 'active' }
])

// 状态数据
const selectedThreat = ref(null)
const isSimulating = ref(false)
const showEmergencyAlert = ref(false)
const emergencyAlertMessage = ref('')
const lastUpdateTime = ref(new Date().toLocaleTimeString())
const systemHealth = ref(0.95)

// 计算属性
const totalTargets = computed(() => aircraftThreats.value.length + shipThreats.value.length)
const highThreats = computed(() => [...aircraftThreats.value, ...shipThreats.value].filter(t => t.threat >= 0.7).length)
const mediumThreats = computed(() => [...aircraftThreats.value, ...shipThreats.value].filter(t => t.threat >= 0.4 && t.threat < 0.7).length)
const lowThreats = computed(() => [...aircraftThreats.value, ...shipThreats.value].filter(t => t.threat < 0.4).length)
const hasActiveThreats = computed(() => highThreats.value > 0)

// 顶部工具栏操作
const refreshData = async () => {
  try {
    // 模拟数据刷新
    await new Promise(resolve => setTimeout(resolve, 1000))
    lastUpdateTime.value = new Date().toLocaleTimeString()

    // 随机更新威胁数据
    aircraftThreats.value.forEach(aircraft => {
      aircraft.threat = Math.max(0, Math.min(1, aircraft.threat + (Math.random() - 0.5) * 0.1))
      aircraft.distance += (Math.random() - 0.5) * 10
    })

    shipThreats.value.forEach(ship => {
      ship.threat = Math.max(0, Math.min(1, ship.threat + (Math.random() - 0.5) * 0.1))
      ship.distance += (Math.random() - 0.5) * 5
    })

    ElMessage.success('数据已刷新')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

const exportReport = () => {
  const reportData = {
    timestamp: new Date().toISOString(),
    summary: {
      totalTargets: totalTargets.value,
      highThreats: highThreats.value,
      mediumThreats: mediumThreats.value,
      lowThreats: lowThreats.value
    },
    aircraft: aircraftThreats.value,
    ships: shipThreats.value,
    systemHealth: systemHealth.value
  }

  const dataStr = JSON.stringify(reportData, null, 2)
  const blob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)

  const link = document.createElement('a')
  link.href = url
  link.download = `threat_assessment_${Date.now()}.json`
  link.click()

  URL.revokeObjectURL(url)
  ElMessage.success('威胁评估报告已导出')
}

const startInterception = async () => {
  try {
    await ElMessageBox.confirm('确定要查看拦截状态吗？', '确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    isSimulating.value = true
    // ElMessage.success('拦截系统已启动')
  } catch {
    // 用户取消
  }
}

// 威胁选择处理
const handleThreatSelected = (threat) => {
  selectedThreat.value = threat
}

// 推演控制
const handleSimulationStart = () => {
  isSimulating.value = true
  ElMessage.info('拦截推演已开始')
}

const handleSimulationStop = () => {
  isSimulating.value = false
  ElMessage.info('拦截推演已停止')
}

// 紧急警报处理
const handleEmergencyResponse = () => {
  showEmergencyAlert.value = false
  isSimulating.value = true
  ElMessage.success('紧急响应已激活')
}

const dismissAlert = () => {
  showEmergencyAlert.value = false
  ElMessage.info('警报已标记为稍后处理')
}

// 模拟威胁检测
const simulateThreatDetection = () => {
  const highThreatTargets = [...aircraftThreats.value, ...shipThreats.value].filter(t => t.threat >= 0.9)
  if (highThreatTargets.length > 0 && Math.random() > 0.7) {
    const target = highThreatTargets[0]
    emergencyAlertMessage.value = `检测到${target.type} (${target.id}) 威胁等级达到 ${(target.threat * 100).toFixed(1)}%`
    showEmergencyAlert.value = true
  }
}

// 生命周期
onMounted(() => {
  // 定期更新数据
  const updateInterval = setInterval(() => {
    lastUpdateTime.value = new Date().toLocaleTimeString()
    systemHealth.value = 0.9 + Math.random() * 0.1
  }, 5000)

  // 定期检测威胁
  const threatInterval = setInterval(() => {
    simulateThreatDetection()
  }, 15000)

  onBeforeUnmount(() => {
    clearInterval(updateInterval)
    clearInterval(threatInterval)
  })
})
</script>

<style scoped>
/* 主容器 - 独立全屏显示 */
.threat-assessment-cockpit {
  height: 100vh;
  width: 96vw;
  display: flex;
  flex-direction: column;
  background: #0a0f1b;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 4vw;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

/* 顶部工具栏 */
.cockpit-header {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: linear-gradient(135deg, #1a2332, #0f1419);
  border-bottom: 1px solid #2d3a4b;
  box-shadow: 0 0.2vh 0.8vh rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.cockpit-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #ff6b6b;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.title-icon {
  font-size: 1.6rem;
  color: #ff4757;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.header-actions {
  display: flex;
  gap: 1vw;
}

.action-group .el-button {
  height: 3.5vh;
  font-size: 0.85rem;
}

/* 主工作区域 */
.cockpit-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* 左侧面板 - 威胁等级仪表盘 */
.left-panel {
  width: 50vw;
  background: #1f2d3d;
  border-right: 1px solid #2d3a4b;
  position: relative;
  overflow: hidden;
}

/* 右侧面板 - 拦截推演沙盘 */
.right-panel {
  width: 50vw;
  background: #0a0f1b;
  position: relative;
  overflow: hidden;
}

/* 底部状态栏 */
.cockpit-footer {
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: #1a2332;
  border-top: 1px solid #2d3a4b;
  font-size: 0.8rem;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #bfcbd9;
}

.blinking {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.threat-summary {
  display: flex;
  gap: 1.5vw;
  align-items: center;
}

.threat-level {
  font-size: 0.75rem;
  padding: 0.2vh 0.5vw;
  border-radius: 0.3vh;
  font-weight: 500;
}

.threat-level.high {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
  border: 1px solid #ff4757;
}

.threat-level.medium {
  background: rgba(255, 165, 2, 0.2);
  color: #ffa502;
  border: 1px solid #ffa502;
}

.threat-level.low {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
  border: 1px solid #2ed573;
}

.performance-indicator {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.perf-icon {
  font-size: 0.9rem;
  color: #ffa502;
  transition: color 0.3s ease;
}

.perf-icon.active {
  color: #2ed573;
}

.perf-text {
  font-size: 0.8rem;
  color: #bfcbd9;
}

/* 紧急警报弹窗 */
.emergency-alert {
  text-align: center;
  padding: 2vh;
}

.alert-icon {
  font-size: 4rem;
  color: #ff4757;
  margin-bottom: 2vh;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.emergency-alert h3 {
  color: #ff4757;
  margin: 1vh 0;
  font-size: 1.3rem;
}

.emergency-alert p {
  color: #bfcbd9;
  margin: 2vh 0;
  font-size: 1rem;
}

.alert-actions {
  display: flex;
  justify-content: center;
  gap: 1vw;
  margin-top: 3vh;
}

/* Element Plus 组件深色主题覆盖 */
.threat-assessment-cockpit :deep(.el-button) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.threat-assessment-cockpit :deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.threat-assessment-cockpit :deep(.el-button--primary) {
  background: #ff4757 !important;
  border-color: #ff4757 !important;
  color: #ffffff !important;
}

.threat-assessment-cockpit :deep(.el-button--primary:hover) {
  background: #ff3742 !important;
  border-color: #ff3742 !important;
}

.threat-assessment-cockpit :deep(.el-button--danger) {
  background: #ff4757 !important;
  border-color: #ff4757 !important;
  color: #ffffff !important;
}

.threat-assessment-cockpit :deep(.el-button:disabled) {
  background: #1a2332 !important;
  border-color: #2d3a4b !important;
  color: #5a6572 !important;
}

.threat-assessment-cockpit :deep(.el-tag) {
  background: rgba(191, 203, 217, 0.1) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.threat-assessment-cockpit :deep(.el-tag--success) {
  background: rgba(46, 213, 115, 0.2) !important;
  border-color: #2ed573 !important;
  color: #2ed573 !important;
}

.threat-assessment-cockpit :deep(.el-tag--warning) {
  background: rgba(255, 165, 2, 0.2) !important;
  border-color: #ffa502 !important;
  color: #ffa502 !important;
}

.threat-assessment-cockpit :deep(.el-tag--danger) {
  background: rgba(255, 71, 87, 0.2) !important;
  border-color: #ff4757 !important;
  color: #ff4757 !important;
}

.threat-assessment-cockpit :deep(.el-dialog) {
  background: #1f2d3d !important;
  border: 1px solid #2d3a4b !important;
}

.threat-assessment-cockpit :deep(.el-dialog__header) {
  background: #1a2332 !important;
  border-bottom: 1px solid #2d3a4b !important;
}

.threat-assessment-cockpit :deep(.el-dialog__title) {
  color: #ff4757 !important;
}

.threat-assessment-cockpit :deep(.el-dialog__body) {
  background: #1f2d3d !important;
  color: #bfcbd9 !important;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .cockpit-title {
    font-size: 1.2rem;
  }

  .status-indicators {
    gap: 0.5vw;
  }
}

@media (max-width: 1200px) {
  .left-panel,
  .right-panel {
    width: 50vw;
  }

  .threat-summary {
    gap: 1vw;
  }

  .threat-level {
    font-size: 0.7rem;
    padding: 0.1vh 0.3vw;
  }
}

@media (max-width: 768px) {
  .cockpit-header {
    height: 8vh;
    flex-direction: column;
    gap: 1vh;
  }

  .cockpit-content {
    flex-direction: column;
  }

  .left-panel,
  .right-panel {
    width: 100vw;
    height: 50vh;
  }

  .status-left .status-item:nth-child(n+3) {
    display: none;
  }
}
</style>
